<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<link type="text/css" rel="stylesheet" href="${ctx}/static/tp/uploadify/css/uploadify.css" />
<script src="${ctx}/static/tp/uploadify/jquery.uploadify-3.1.js" type="text/javascript"></script>
<script type="text/javascript">
	var usergrid;

	//图像
	var res_tu = function(id, name, clas) {

		var te = "<span onclick='"+id+"' style='margin-left:3px;cursor:pointer;'>【"
				+ "" + name + "】</span>";
		return te;
	}
	$(function() {
		usergrid = $('#usergrid').datagrid(
				{
					//title : '用户列表',
					url : '${ctx}/sys/user/list',
					striped : true,
					rownumbers : true,
					pagination : true,
					singleSelect : true,
					idField : 'lid',
					sortName : 'create_date',
					sortOrder : 'desc',
					pageSize : 50,
					pageList : [ 10, 20, 30, 40, 50, 100, 200, 300, 400, 500 ],
					frozenColumns : [ [ {
						width : '100',
						title : '登录名',
						field : 'account',
						sortable : true
					}, {
						width : '80',
						title : '姓名',
						field : 'username',
						sortable : true
					} ] ],
					columns : [ [
							{
								width : '150',
								title : '创建时间',
								field : 'create_date',
								sortable : true
							},
							{
								width : '50',
								title : '性别',
								field : 'sex',
								sortable : true,
								formatter : function(value, row, index) {
									switch (value) {
									case 0:
										return '女';
									case 1:
										return '男';
									}
								}
							},
							{
								width : '50',
								title : 'email',
								field : 'age',
								hidden : true
							},
							{
								width : '90',
								title : '手机',
								field : 'phone'
							},
							{
								width : '90',
								title : '电话',
								field : 'mobile'
							},
							{
								title : '操作',
								field : 'action',
								width : '160',
								formatter : function(value, rows) {
									var str = '';
									<shiro:hasPermission name="/sys/user/delete">
									str += res_tu("userremoveFun(\"" + rows.lid
											+ "\")", "删除", "icon-no");
									</shiro:hasPermission>
									<shiro:hasPermission name="/sys/user/adupdate/pro">
									str += res_tu("userupdateFun(\"" + rows.lid
											+ "\")", "修改", "icon-edit");
									</shiro:hasPermission>
									<shiro:hasPermission name="/sys/user/usergrant/tree/pro">
									str += res_tu("userGrantFun(\"" + rows.lid
											+ "\")", "授权", "icon-sum");
									
									</shiro:hasPermission>
									return str;
								}
							} ] ],
					toolbar : '#usertoolbar',
					onBeforeLoad : function(param) {
						parent.$.messager.progress({
							text : '数据加载中....'
						});
					},
					onLoadSuccess : function(data) {
						$('.iconImg').attr('src', sy.pixel_0);
						parent.$.messager.progress('close');
					}
				});
	});

	var userexportXls=function(){
		window.location.href ="${ctx}/sys/user/exportXls";
	}
	
	var userimportxls=function(){
		$('<div/>').dialog({
			href : '${ctx}/sys/user/upload',
			width : 640,
			height : 290,
			modal : true,
			title : '导入excel',
			buttons : [ {
				text : '确定',
				iconCls : 'icon-add',
				handler : function() {
					var d = $(this).closest('.window-body');
					$("#file_upload").uploadify("upload");
				}
			} ],
			onLoad:function(){
				$("#file_upload").uploadify({
							'buttonText' : '导入文件',//按钮上的文字
							'auto' : false,//是否选取文件后自动上传
							'progressData' : 'speed',//有speed和percentage两种，一个显示速度，一个显示完成百分比 
							'multi' : true,//是否支持多文件上传
							'height' : 25,
							'fileTypeDesc' : '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性，那么这个属性是必须的 
							'fileTypeExts' : '*.xls;*.xlsx',//允许的格式
							'queueID' : 'fileQueue',
							'fileSizeLimit' : '15MB',
							'swf' : '${ctx}/static/tp/uploadify/uploadify.swf',
							'uploader' : '${ctx}/sys/user/importExcel',
							'onUploadSuccess' : function(file, data, response) {
								try {
									var r = $.parseJSON(data);
									if (r.success) {
										usergrid.datagrid('reload'); // 刷新数据  
										d.dialog('destroy');
									}
									$.messager.show({
										title : '温馨提示',
										msg : r.message
									});

								} catch (e) {
									$.messager.alert('温馨提示', r.message);
									return;
								}
							},
							'onSelectError': function(file,errorCode,errorMsg) {//当文件选定发生错误时触发
								switch(errorCode) {
								case -100:
									alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件！");
									break;
			 					case -110: 
									alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
									break;
								case -120:
									alert("文件 ["+file.name+"] 大小异常！");
									break;
								case -130:
									alert("文件 ["+file.name+"] 类型不正确！");
									break;
								}
							},

				});
			},
			onClose : function() {
				$(this).dialog('destroy');
			}
		});
	}

	//删除
	var userremoveFun = function(id) {
		parent.$.messager.confirm('询问', '您确定要删除此记录？', function(r) {
			if (r) {
				$.post('${ctx}/sys/user/delete/' + id, {
					id : id
				}, function() {
					usergrid.datagrid('reload');
				}, 'json');
			}
		});
	};
	//添加
	var useraddFun = function() {
		$('<div/>').dialog({
			href : '${ctx}/sys/user/adupdate/pro',
			width : 640,
			height : 290,
			modal : true,
			title : '添加用户',
			buttons : [ {
				text : '添加',
				iconCls : 'icon-add',
				handler : function() {
					var d = $(this).closest('.window-body');
					$('#user_updateForms').form('submit', {
						url : '${ctx}/sys/user/adupdate',
						success : function(result) {
							try {
								var r = $.parseJSON(result);
								if (r.success) {

									usergrid.datagrid('reload'); // 刷新数据  
									d.dialog('destroy');
								}
								$.messager.show({
									title : '温馨提示',
									msg : r.message
								});

							} catch (e) {
								$.messager.alert('温馨提示', r.message);
								return;
							}

						}

					});
				}

			} ],
			onLoad : function() {
				//$("#res_updateForm").form('load',entity);
			},
			onClose : function() {
				$(this).dialog('destroy');
			}
		});

	};

	//修改
	var userupdateFun = function(id) {
		$('<div/>').dialog({
			href : '${ctx}/sys/user/adupdate/pro?id=' + id,
			width : 640,
			height : 290,
			modal : true,
			title : '修改用户',
			buttons : [ {
				text : '修改',
				iconCls : 'icon-add',
				handler : function() {
					var d = $(this).closest('.window-body');
					$('#user_updateForms').form('submit', {
						url : '${ctx}/sys/user/adupdate',
						success : function(result) {
							try {
								var r = $.parseJSON(result);
								if (r.success) {

									usergrid.datagrid('reload'); // 刷新数据  
									d.dialog('destroy');
								}
								$.messager.show({
									title : '温馨提示',
									msg : r.message
								});

							} catch (e) {
								$.messager.alert('温馨提示', r.message);
								return;
							}

						}

					});
				}

			} ],
			onLoad : function() {
				//$("#res_updateForm").form('load',entity);
			},
			onClose : function() {
				$(this).dialog('destroy');
			}
		});

	};

	//授权角色

	var userGrantFun = function(id, roleName) {
		$("#user-panel").panel({
			title : "当前用户角色",
			href : "${ctx}/sys/user/usergrant/tree/pro?id=" + id
		});
		//$('#function-panel').panel("refresh" );	
	};
</script>
<!-- 界面布局  -->
<div class="easyui-layout" style="width: 100%; height: 100%;"
	data-options="fit:true,border:false">

	<div id="usertoolbar" style="display: none;">

		<table>
			<tr>
				<td>
					<form id="usersearchForm">
						<table>
							<tr style="font-size: 13px;">
								<td>登录名</td>
								<td><input name="QUERY_t#loginname_S_LK"
									style="width: 80px;" /></td>
								<td>姓名</td>
								<td><input name="QUERY_t#name_S_LK" style="width: 80px;" /></td>
								<td>性别</td>
								<td><select name="QUERY_t#sex_S_EQ" class="easyui-combobox"
									data-options="panelHeight:'auto',editable:false"><option
											value="">请选择</option>
										<option value="1">男</option>
										<option value="0">女</option></select></td>
								<td>创建时间</td>
								<td><input name="QUERY_t#createdatetime_D_GE" class="Wdate"
									onclick="WdatePicker({readOnly:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})"
									readonly="readonly" style="width: 120px;" />-<input
									name="QUERY_t#createdatetime_D_LE" class="Wdate"
									onclick="WdatePicker({readOnly:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})"
									readonly="readonly" style="width: 120px;" /></td>
								<td><a href="javascript:void(0);" class="easyui-linkbutton"
									data-options="iconCls:'icon-search',plain:true"
									onclick="usergrid.datagrid('load',sy.serializeObject($('#usersearchForm')));">过滤</a><a
									href="javascript:void(0);" class="easyui-linkbutton"
									data-options="iconCls:'icon-reload',plain:true"
									onclick="$('#usersearchForm input').val('');usergrid.datagrid('load',{});">重置过滤</a></td>
							</tr>
						</table>
					</form>
				</td>
			</tr>
			<tr>
				<td>
					<table>
						<tr>
							<shiro:hasPermission name="/sys/user/adupdate/pro">
								<td><a href="javascript:void(0);" class="easyui-linkbutton"
									data-options="iconCls:'icon-add',plain:true"
									onclick="useraddFun();">添加</a></td>
							</shiro:hasPermission>
							<td><div class="datagrid-btn-separator"></div></td>
							<td><a href="javascript:userimportxls();" class="easyui-linkbutton"
								data-options="iconCls:'icon-undo',plain:true" onclick="">导入</a></td>
							<td><a href="javascript:userexportXls();" class="easyui-linkbutton"
								data-options="iconCls:'icon-redo',plain:true" onclick="">导出</a></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
	<div data-options="region:'center',title:'用户管理'" style="padding: 2px;">
		<div class="easyui-layout" data-options="fit : true,border : false">
			<div data-options="region:'center',border:false">
				<table id="usergrid" data-options="fit:true,border:false"></table>
			</div>
		</div>
	</div>
	<div data-options="region:'east', split:true" style="width: 320px;">
		<div class="easyui-panel"
			data-options="fit:true,border:false,title:'权限设置'"
			style="padding: 10px;" id="user-panel"></div>
	</div>
</div>